{% extends "base.html" %}
{% load static %}
{% load thumbnail %}
{% load humanize %}
{% load lutris %}

{% block nopage %}
<script src="{% static 'jssor/js/jssor.slider.min.js' %}"></script>
<!--div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1280px;height:720px;overflow:hidden;visibility:hidden;">
  <div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1280px;height:720px;overflow:hidden;">
    <div style="background: url('{% static 'images/carousel/overwatch.jpg' %}') no-repeat center center fixed; background-size: cover; background-size: 100%;">
      <a data-t="0" class="slide-legend" data-events="auto" data-display="block" href="/games/overwatch">
        安装《守望先锋》
      </a>
    </div>
    <div style="background: url('{% static 'images/carousel/warcraft.jpg' %}') no-repeat center center fixed; background-size: cover; background-size: 100%;">
      <a data-t="0" class="slide-legend" data-events="auto" data-display="block" href="/games/world-of-warcraft">
        安装《魔兽世界》
      </a>
    </div>
    <div style="background: url('{% static 'images/carousel/ni-shui-han.jpg' %}') no-repeat center center fixed; background-size: cover; background-size: 100%;">
      <a data-t="0" class="slide-legend" data-events="auto" data-display="block" href="/games/ni-shui-han/">
        安装《逆水寒》
      </a>
    </div>
  </div>
  <div data-u="arrowleft" class="jssora093" style="width:50px;height:50px;top:0px;left:30px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <circle class="c" cx="8000" cy="8000" r="5920"></circle>
        <polyline class="a" points="7777.8,6080 5857.8,8000 7777.8,9920 "></polyline>
        <line class="a" x1="10142.2" y1="8000" x2="5857.8" y2="8000"></line>
    </svg>
  </div>
  <div data-u="arrowright" class="jssora093" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <circle class="c" cx="8000" cy="8000" r="5920"></circle>
        <polyline class="a" points="8222.2,6080 10142.2,8000 8222.2,9920 "></polyline>
        <line class="a" x1="5857.8" y1="8000" x2="10142.2" y2="8000"></line>
    </svg>
  </div>
</div-->

<div class="container">
  <div class="row">
    <div class="col-lg-12 intro-text centered">
        <h1>在 UOS/Deepin/Linux 上玩你喜欢的 Windows 游戏</h1>
        <p>
          Wine游戏助手是 UOS/Deepin/Linux 上的开源游戏平台，
          是开源项目 <a href="https://lutris.net/">Lutris</a> 的中国定制版。
          通过Wine游戏助手，你可以在 UOS/Deepin/Linux 系统中
          一键安装你熟悉的 Windows 游戏，快速下载、即刻畅玩，
          免去配置 Wine、DXVK，调设置、不兼容等烦恼。
          与开源项目 Lutris 相比，我们拥有中国境内的服务器，组件下载速度更快，
          并且游戏列表里也有更多中国常见的游戏。
          Wine游戏助手支持各大游戏平台，包括但不限于Steam、暴雪战网、
          Origin（橘子）、UPlay（育碧）、Epic等，
          其中很多游戏都可以在 UOS/Deepin/Linux 上正常运行。
          就算你的游戏不在我们的一键安装列表中也没关系。
          只要<a href="https://hu60.cn/q.php/bbs.topic.94926.html#nav">跟着教程一步一步操作</a>，你就可以自行下载游戏（exe）进行安装，
          也许它就能在你的 UOS/Deepin/Linux 系统中正常运行。
          祝您游戏愉快！
        </p>
    </div>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <p class="intro-text">
        <a href="/downloads" class="action-button">安装Wine游戏助手</a><br/>
        Wine游戏助手使用社区贡献的安装脚本帮你一键安装游戏。
        安装后，将使用称为“运行环境”的程序启动游戏。
        对于 Windows 游戏，运行环境通常是各种版本的 Wine，以及附带的 DXVK 等组件。
        此外，Wine游戏助手还支持 DOSBox 等运行环境，帮你模拟运行其他平台的游戏。

      </p>
    </div>
    <div class="col-sm-4">
      <p class="intro-text" >
        <a href="{% url 'about' %}" class="action-button">求助/讨论</a><br/>
        安装失败？游戏崩溃？想玩的游戏不在列表中？
        “我们遇到什么困难也不要怕”，去论坛、QQ群、微信群里找人帮忙吧。
      </p>
    </div>
    <div class="col-sm-4">
      <p class="intro-text">
        <a href="https://gitee.com/winegame" class="action-button">参与开发</a><br/>
        “想实现新功能。”
        “找到一个Bug！”
        “我觉得这里可以改进一下。”
        欢迎加入我们的开源社区，一起让这个项目变得更完美。
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h3>新增游戏</h3>
      <div class='latest-games'>
      {% for game in new_games %}
        <div class='game-banner'>
          <a href="{{ game.get_absolute_url }}" title="{{game.name}}">
            {% thumbnail game.title_logo '184x69' crop="center" as img %}
              <img class='game-cover' src='{{ img.url }}' alt='{{ game.name }}'/>
            {% empty %}
              <span class='game-cover'>no image</span>
            {% endthumbnail %}
            <span class='game-title'>{{game.name}}</span>
          </a>
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h3>最近更新</h3>
      <div class='latest-games'>
      {% for game in updated_games %}
        <div class='game-banner'>
          <a href="{{ game.get_absolute_url }}" title="{{game.name}}">
            {% thumbnail game.title_logo '184x69' crop="center" as img %}
              <img class='game-cover' src='{{ img.url }}' alt='{{ game.name }}'/>
            {% empty %}
              <span class='game-cover'>no image</span>
            {% endthumbnail %}
            <span class='game-title'>{{game.name}}</span>
          </a>
        </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>
<br/><br/>

<script>
  var options = {
    $AutoPlay: 1,
    $Idle: 5000,
    $ArrowNavigatorOptions: {
        $Class: $JssorArrowNavigator$,
        $ChanceToShow: 2,
        $AutoCenter: 2,
    }
  };
  var jssor_1_slider = new $JssorSlider$("jssor_1", options);
  var MAX_WIDTH = 1280;

  function ScaleSlider() {
      var containerElement = jssor_1_slider.$Elmt.parentNode;
      var containerWidth = containerElement.clientWidth;
      if (containerWidth) {
          var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
          jssor_1_slider.$ScaleWidth(expectedWidth);
      }
      else {
          window.setTimeout(ScaleSlider, 30);
      }
  }

  ScaleSlider();

  $Jssor$.$AddEvent(window, "load", ScaleSlider);
  $Jssor$.$AddEvent(window, "resize", ScaleSlider);
  $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
</script>
{% endblock %}
